<template>
    <div>
        <div class="width-75 tc">
            <div class="z-header">
                <div @click="$router.back(-1)" class="lt">
                    <i class="iconfont icon-zuo m-t-18"></i>
                </div>
                <div class="fs-36 c-3">
                    发布筹帮
                </div>
            </div>
            <div>
                <textarea name="" id="" cols="30" rows="10" placeholder="描述一下筹帮的内容，要求和时间" class="textarea" v-model="requirement">

                </textarea>
            </div>
            <div>
                <changeImg v-on:arr="toshow"></changeImg>
                <div class="tl c-9 m-t-4 fs-24">
                    <i class="iconfont icon-dingweiweizhi"></i>&nbsp;河南&nbsp;郑州&nbsp;金水区
                </div>

            </div>
        </div>
        <div class="index-blank m-t-18"></div>
        <div>
            <from class="width-75 m-t-18">
                <div class="flex">
                    <button v-for="(todo, index) in classify" class="rrButton rrButton-c" v-bind:class="{rcf:index==current}" @click="classifyText(index,todo.payrollTypeName,todo.payrollTypeId)">{{todo.payrollTypeName}}</button>
                </div>
            </from>
            <nav class="m-t-18 tl">
                <ul>
                    <li class="z-header bb-1-e">
                        <div class="width-75">
                            <span>酬金</span><input type="text" placeholder="请输入酬金(数字)" class="m-l-10 b-0" v-model="payrollMoney1"><span>元</span>
                        </div>
                    </li>
                    <li class="z-header bb-1-e">
                        <div class="width-75" @click="openPicker">
                            <span>时间</span><input type="text" placeholder="点击选择订单结束时间" class="m-l-10 b-0 input-w-5" v-model="raiseDate">
                        </div>
                    </li>
                    <li class="z-header bb-1-e">
                        <div class="width-75">
                            <span>地点</span><input type="text" placeholder="请输入地点" class="m-l-10 b-0 input-w-5" v-model="site">
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="rr-bottom width-75 tc">
            <div class="b-c2 c-f p-tb-18 fs-32" @click="releaseRaise">
                确认发布
            </div>
        </div>
        <mt-datetime-picker ref="picker" type="datetime" v-model="pickerVisible" month-format="{value} 月" hour-format="{value} 时" minute-format="{value} 分" year-format="{value} 年" date-format="{value} 日" @confirm="handleConfirm" :startDate="startDate">
        
        </mt-datetime-picker>
        <!--<mt-datetime-picker ref="picker" v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月" class="remember" @confirm="handleConfirm" :startDate="startDate">
        </mt-datetime-picker>-->
    </div>
</template>
<script>
import { allDate,z } from '../assets/js/common'
import { MessageBox } from 'mint-ui';
                

export default ({
    data() {
        return {
            imgurl: [],//筹办图片的地址
            classify: "",
            current: 0, //筹帮分类下标
            text: "代步", //筹帮分类
            TypeId: "",//筹帮分类id
            pickerVisible: "",
            startDate: new Date('2018-1-1'),//时间选择棋的初始时间
            raiseDate:"", //显示给客户的时间
            payrollMoney1:"",//筹帮
            site:"",//地点
            requirement:""
        }
    },
    methods: {
        toshow(msg) {
            // this.msg = msg;
            console.log(msg);
            this.imgurl.push(msg);
        },
        classifyText(index, text, type) {
            this.current = index;  //将下标赋给current
            this.text = text;
            this.TypeId = type;
        },
        raiseText() {
            this.$http({
                method: "get",
                url: localPath + '/payroll/findAllPayrollType',
                data: ""
            }).then((data) => {
                this.classify = data.data;
                this.text = data.data[0].payrollTypeName;  //text 和 typeId 默认是第一个
                this.TypeId = data.data[0].payrollTypeId;
                console.log(this.classify);
            }).cahch((error) => {
                console.log(error);
            })
        },
        openPicker() {
            this.$refs.picker.open();
        },
        handleConfirm() {
            //点击时间确定按钮时把选好的值给raiseDate
            this.raiseDate=allDate(this.pickerVisible);
            console.log(this.pickerVisible);
          
        },
        releaseRaise(){
            console.log(this.pickerVisible);
            var params = new URLSearchParams();
            params.append("payrollType.payrollTypeId", this.TypeId);
            params.append("school.schoolId", localStorage.schoolId);
            params.append("payrollMoney1", this.payrollMoney1);
            params.append("payrollTime", this.pickerVisible);
            params.append("payrollAddress", this.site);
            params.append("requirement", this.requirement);
            params.append("payrollPicture" , this.imgurl)
            this.$http({
                method:"post",
                url: localPath + "/payroll/addPayroll",
                data:params
            }).then((data)=>{
                 MessageBox.alert(data.data.message.msg);
                console.log(data);
            }).cahch((error)=>{
                console.log(error);
            })
        }
        
    },
    mounted() {
        this.raiseText();
        document.addEventListener(z());
    }
})
</script>
<style>
.rrButton {
    width: 1.3rem;
    height: .7rem;
    border-radius: 6px;
}

.rrButton-c {
    background-color: #eeeeee;
    color: #333333;
}

.rr-bottom {
    position: fixed;
    bottom: 0;
}

.rcf {
    background: #c29354;
    color: #ffffff
}
.input-w-1{
    width: 1rem;
}
.input-w-5{
    width: 5rem;
}
.picker-slot{
    font-size: .12rem;
}
</style>
 

